<template>
	<view class="groupon" v-if="grouponList.length>0"> 
		<u-section :showLine="false" title="今日必拼" sub-title="更多" :bold="false" @click="clickMore"></u-section>
		<u-grid :col="4" :border="false" @click="clickItem"> 
			<u-grid-item v-for="(item, index) in grouponList" :key="index" :index="item.sharing_id">
				<u-tag class="badge-icon" :text="item.text" size="mini" shape="circleRight" mode="dark" bgColor="#20cbd4" color="#0e595d"/>
				<u-image  width="150rpx" height="150rpx" :src="item.first_image"></u-image>
				<view class="price">¥{{item.price}}</view>
				<view class="u_price">¥{{item.line_price}}</view>
			</u-grid-item>
		</u-grid>
	</view>
</template>

<script>
	export default {
		props: ["grouponList"],
		data() {
			return {
				
			}
		},
		methods: {
			clickMore(){
				uni.navigateTo({
				  url: '/goods/groupon'
				});
			},
			clickItem(sharing_id){
				uni.navigateTo({
				  url: '/sharing/goodsDetail?sharing_id='+sharing_id
				});
			}
		}
	}
</script>

<style>
	.groupon{
		margin: 10rpx 10rpx 10rpx;
		padding: 20rpx 20rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}
	.price{
		color: #FA3534;
	}
	.u_price{
		color: #909399;
		font-size: 25rpx;
		text-decoration: line-through;
	}
	.badge-icon {
		position: absolute;
		z-index: 1;
		bottom: 105rpx;
		left: 12rpx;
	}
</style>
